<template>
  <div class="right-top-left-content flex-1">
    <div class="oper_content win-flex-row">
      <span class="name mr5">类型</span>
      <el-select filterable clearable placeholder="类型" v-model="fileDirectory.categoryId"
        @change="handleFileDirectoryChange">
        <el-option :key="'fileDirectory_' + index" v-for="(item, index) in categoryList" :label="item.label"
          :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" @click="refreshDirectory" class="ml5">刷新目录</el-button>
      <el-button type="primary" @click="jumpToAi" class="ml5">智能回复</el-button>
    </div>
    <div class="content">
      <el-tabs v-model="currTabName">
        <el-tab-pane label="插播音频" name="insertAudio" class="item">
          <InsertAudio />
        </el-tab-pane>
        <el-tab-pane label="黑名单设置" name="blackList" class="item">
          <BlackList />
        </el-tab-pane>
        <el-tab-pane label="关键字回复" name="keyword" class="item keywordContent">
          <KeywordSetting :content="keywordContent" />
        </el-tab-pane>
        <el-tab-pane label="智能回复" name="smartReply" class="item smartReplyContent">
          <SmartReplySetting />
        </el-tab-pane>
        <el-tab-pane label="用户新进" name="userEnter" class="item userEnterContent">
          <UserEnterSetting :content="userEnterContent" />
        </el-tab-pane>
        <el-tab-pane label="音画同步" name="mainVideo" class="item mainVideo">
          <MainVideo />
        </el-tab-pane>
        <!-- <el-tab-pane label="批量语音生成" name="batchGenAudio" class="item batchGenAudio">
          <BatchGenAudio />
        </el-tab-pane> -->
      </el-tabs>
    </div>

  </div>
</template>

<script>
import { getAllList as getItemAllList } from '@/api/script/item';
import { getList as getCategoryList } from '@/api/script/category';
import { mapActions } from "vuex";
import { EventBus } from '@/event-bus.js';
export default {
  name: 'RightTopLeft',
  data() {
    return {
      keywordContent: '',
      userEnterContent: '',
      currTabName: 'insertAudio',
      categoryList: [],
    };
  },
  components: {
    MainVideo: resolve => require(['./left/MainVideo.vue'], resolve),
    BatchGenAudio: resolve => require(['./left/BatchGenAudio.vue'], resolve),
    KeywordSetting: resolve => require(['./left/KeywordSetting.vue'], resolve),
    UserEnterSetting: resolve => require(['./left/UserEnterSetting.vue'], resolve),
    InsertAudio: resolve => require(['./left/InsertAudio.vue'], resolve),
    SmartReplySetting: resolve => require(['./left/SmartReplySetting.vue'], resolve),
    BlackList: resolve => require(['./left/BlackList.vue'], resolve),
  },
  created() {
    this.getCategoryList();
  },
  computed: {
    fileDirectory() {
      return this.pageConfig.fileDirectory;
    },
    pageConfig() {
      return this.$store.state.page.config;
    }
  },
  mounted() {
    EventBus.$on('refreshDirectory', this.refreshDirectory);
  },
  beforeDestroy() {
    EventBus.$off('refreshDirectory', this.refreshDirectory);
  },
  methods: {
    ...mapActions({
      setKeywordContent: "setKeywordContent",
      setUserEnterContent: 'setUserEnterContent',
      setMainAudioFileList: 'setMainAudioFileList',
    }),
    jumpToAi() {
      EventBus.$emit('jumpToAi');
    },
    /**
     * 文件目录改变
     */
    handleFileDirectoryChange() {
      this.getItemAllList();
    },
    /**
     * 刷新目录
     */
    refreshDirectory() {
      this.getCategoryList();
    },
    /**
     * 获取路径下面的分类
     */
    getCategoryList() {
      getCategoryList({
        pageSize: 100,
        pageNo: 1,
        queryParams: {}
      }).then((res) => {
        if (res.result.items) {
          this.categoryList = res.result.items.map(item => {
            return {
              label: item.scriptCategoryName,
              value: item.id
            }
          });
          if (this.categoryList.length > 0) {
            if (this.fileDirectory.categoryId === '') {
              this.fileDirectory.categoryId = this.categoryList[0].value;
            }
          } else {
            this.fileDirectory.categoryId = '';
          }
          this.getItemAllList();
        }
      });
    },
    /**
     * 获取路径下面的分类
     */
    getItemAllList() {
      this.keywordContent = '';
      this.userEnterContent = '';
      getItemAllList(this.fileDirectory.categoryId).then((res) => {
        if (res.result) {
          this.keywordContent = res.result.keyword;
          this.userEnterContent = res.result.userEnter;
          this.setKeywordContent(res.result.keyword);
          this.setUserEnterContent(res.result.userEnter);
          this.setMainAudioFileList(res.result.mainAudioFileList);
        } else {
          this.keywordContent = "";
          this.userEnterContent = "";
          this.setKeywordContent("");
          this.setUserEnterContent("");
          this.setMainAudioFileList([]);
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.right-top-left-content {
  border: 1px solid var(--color-border-first);
  display: flex;
  flex-direction: column;

  .oper_content {
    padding: 5px 10px;
    border-bottom: 1px solid var(--color-border-first);
    align-items: center;
    height: 50px;
  }

  .content {
    flex: 1;

    ::v-deep .el-tabs__header {
      margin-bottom: 0px;
    }

    ::v-deep .el-tabs__nav-wrap {
      padding-left: 10px;
    }

    ::v-deep textarea {
      height: 100%;
    }
  }

  ::v-deep .oper {
    border-top: 1px solid var(--color-border-first);
    height: 50px;
    width: 100%;
    padding: 0px 10px;
    display: flex;
    justify-content: right;
    align-items: center;
  }
}
</style>
